<template>
  <view class="container">
    <!-- 顶部导航 -->
    <!-- <u-navbar :is-back="vuex_back" :custom-back="onBack">
			<view class="slot-wrap">
				<u-search style="width:100%" placeholder="搜索客户名称、手机、电话" v-model="keyword" :input-style="search"  :show-action="false" @change="onSearch"></u-search>
			</view>
		</u-navbar> -->
    <view class="u-border-bottom">
      <u-tabs
        :list="tabList"
        :is-scroll="false"
        :current="current"
        active-color="#2979ff"
        @change="tabChange"
      ></u-tabs>
    </view>
    <!-- 排序 -->
    <view class="sort">
      <u-dropdown :border-bottom="false">
        <u-dropdown-item
          v-model="value1"
          :title="sortName"
          :options="options1"
          @change="optionsChange"
        ></u-dropdown-item>
      </u-dropdown>
      <view class="left-text">
        <u-search
          style="width: 100%"
          placeholder="搜索关键字"
          v-model="keyword"
          :input-style="search"
          :show-action="false"
          @change="onSearch"
        ></u-search>
      </view>
    </view>
    <view class="wrap">
      <scroll-view
        scroll-y
        class="sv"
        :style="{ height: scrollHeight + 'px' }"
        :scroll-top="scrollTop"
        lower-threshold="20"
        @scroll="scroll"
        @scrolltolower="reachBottom"
      >
        <view
          class="page-box"
          @touchmove="handletouchstart"
          @touchend="handletouchend"
        >
          <block v-if="dataList.length > 0">
            <view
              class="client"
              v-for="(items, index) in dataList"
              :key="index"
            >
              <view class="top">
                <view class="left">
                  <view
                    class="store u-line-1"
                    v-if="current == 0 && items.customer"
                    @click="
                      $u.route('/pages/client/customerDetails', {
                        id: items.customer.id,
                      })
                    "
                    >{{ items.customer.name }}</view
                  >
                  <view
                    class="store u-line-1"
                    v-if="current == 1 && items.clues"
                    @click="
                      $u.route('/pages/clues/cluesDetails', {
                        id: items.clues.id,
                      })
                    "
                    >{{ items.clues.name }}</view
                  >
                  <view
                    class="store u-line-1"
                    v-if="current == 2 && items.business"
                    @click="
                      $u.route('/pages/business/detail', {
                        id: items.business.id,
                      })
                    "
                    >{{ items.business.name }}</view
                  >
                </view>
                <view
                  :style="{
                    color:
                      items.deal_status == 1 ? '#19be6b' : vuex_theme.color,
                  }"
                >
                  {{ items.record_type_text }}
                </view>
              </view>
              <view
                class="item"
                @click="
                  modalShow = true;
                  content = items.content;
                "
              >
                <view class="content">
                  <view class="title u-line-2">{{ items.content }}</view>
                  <!-- <u-parse class="type" :html="items.content"></u-parse> -->
                </view>
              </view>
              <view class="bottom">
                <view class="client_time u-flex">
                  <view class="u-line-1" style="max-width: 120px">
                    {{ items.create_user.username }}
                  </view>
                  <text class="u-m-l-10">{{
                    timeFormats(items.create_time)
                  }}</text>
                </view>
                <view class="u-flex">
                  <view
                    class="btn u-m-l-15 entity"
                    :style="{
                      backgroundColor: vuex_theme.color,
                      color: vuex_theme.bgColor,
                    }"
                    @click.stop="onDel(items.id, index)"
                    >删除</view
                  >
                </view>
              </view>
            </view>
            <u-loadmore :status="listStatus"></u-loadmore>
          </block>
          <u-empty
            text="暂无数据"
            v-else
            margin-top="100"
            mode="list"
          ></u-empty>
        </view>
      </scroll-view>
    </view>
    <!-- <view class="floatBtn" :class="specClass"   @click="onAdd"  >
			<u-icon class="u-p-b-5" name="plus"  size="40" :color="vuex_theme.color"></u-icon>添加客户
		</view> -->
    <u-modal
      v-model="modalShow"
      :title-style="{ color: 'red' }"
      title="跟进详情"
    >
      <view class="slot-content">
        <scroll-view scroll-y class="content-box" :style="{ height: '400rpx' }">
          <rich-text :nodes="content"></rich-text>
        </scroll-view>
      </view>
    </u-modal>
  </view>
</template>

<script>
import { processingImages, getImgUrl } from "@/common/mUtils";
export default {
  data() {
    return {
      modalShow: false,
      content: "",
      sortName: "筛选跟进类型",
      sort: "id",
      keyword: "",
      sceneName: "全部客户",
      specClass: "hide",
      priceShow: false,
      oldScrollTop: 0,
      scrollTop: -1,
      search: {
        fontSise: "18px",
      },
      dataList: [],
      value1: 0,
      options1: [],
      consentShow: false,
      refund_type: 1,
      current: 0,
      dx: 0,
      pH: 0, //窗口高度
      scrollHeight: 0, //元素的所需高度
      page: 0,
      pageSize: 20,
      lastPage: false,
      listStatus: "loadmore",
      is_refresh: false, // 是否需要刷新页面
      tabList: [
        {
          name: "客户",
        },
        {
          name: "线索",
        },
        {
          name: "商机",
        },
      ],
      current: 0,
    };
  },
  filters: {
    //图片地址url 拼接
    changImg(val) {
      if (val) {
        return getImgUrl(val);
      } else {
        return "";
      }
    },
    changeStatus(val) {
      switch (val) {
        case 0:
          return "未成交";
          break;
        case 1:
          return "已成交";
          break;
        default:
          return "--";
          break;
      }
    },
  },
  onHide() {
    console.log("隐藏");
    // 页面销毁清除已选筛选数据
    // this.$u.vuex('vuex_filter', {})
  },
  onUnload() {
    // 页面销毁清除已选商品数据
    this.$u.vuex("vuex_back", false);
    // 清除刷新页面监听
    uni.$off("getlist");
  },
  onReady() {
    let that = this;
    uni.getSystemInfo({
      //调用uni-app接口获取屏幕高度
      success(res) {
        //成功回调函数
        that.pH = res.windowHeight; //windoHeight为窗口高度，主要使用的是这个
        let scrollH = uni.createSelectorQuery().select(".sv"); //想要获取高度的元素名（class/id）
        scrollH
          .boundingClientRect((data) => {
            let pH = that.pH;
            that.scrollHeight = pH - data.top - 5; //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
          })
          .exec();
      },
    });
  },
  onLoad(e) {
    // 在onLoad里触发更新，防止返回再次加载数据
    this.getList();
    this.getBaseConfig();
  },
  onShow() {
    // 是否需要刷新页面
    if (this.is_refresh) {
      // 刷新完复原
      this.is_refresh = false;
      this.page = 0;
      this.lastPage = false;
      this.scrollTop = 0;
      this.dataList = [];
      this.getList();
    }
    // 是否有筛选数据 重新加载数据
    if (!this.$u.test.isEmpty(this.vuex_filter.filter)) {
      this.page = 0;
      this.lastPage = false;
      this.getList();
    }
  },
  computed: {},
  methods: {
    // 获取配置字段
    getBaseConfig() {
      this.$u.api.getBaseConfig().then((res) => {
        if (res.code == 1) {
          this.options1 = this.onJson(res.data.recordTypeList);
        }
      });
    },
    // json 转化
    onJson(data) {
      let arr = [
        {
          label: "默认排序",
          value: "0",
        },
      ];
      for (const key in data) {
        if (Object.hasOwnProperty.call(data, key)) {
          let obj = {
            label: data[key],
            value: key,
          };

          arr.push(obj);
        }
      }
      return arr;
    },
    tabChange(index) {
      this.current = index;
      this.page = 0;
      this.lastPage = false;
      this.getList();
    },
    // 排序
    optionsChange() {
      this.sortName = this.options1[this.value1].label;
      this.page = 0;
      this.lastPage = false;
      this.getList();
    },
    handletouchstart() {
      this.specClass = "show";
    },
    handletouchend() {
      this.specClass = "hide";
    },
    // 返回上一页
    onBack() {
      // 返回上一页
      this.$u.route("pages/backlog/index");
    },
    // 格式化时间
    timeFormats(val) {
      if (val) {
        return this.$u.timeFormat(val, "yyyy/mm/dd hh:MM");
      } else {
        return "--";
      }
    },
    // 页面数据
    async getList(isNextPage, pages) {
      // 筛选参数
      let filterObj = {};
      let opObj = {};
      if (this.current == 0 || this.current == 2) {
        filterObj.scene_id = 4;
        opObj.scene_id = "=";
      }
      // 跟进方式排序筛选
      if (this.value1 != 0) {
        filterObj.record_type = this.value1;
        opObj.record_type = "=";
      }
      let params = {
        sort: "id",
        order: "desc",
        search: this.keyword,
        offset: (pages || 0) * this.pageSize,
        limit: this.pageSize,
        filter: JSON.stringify(filterObj),
        op: JSON.stringify(opObj),
      };
      let res = {};
      switch (this.current) {
        case 0:
          res = await this.$u.api.getRecord(params);
          break;
        case 1:
          res = await this.$u.api.getCluesRecordList(params);
          break;
        case 2:
          res = await this.$u.api.onBusinessRecord(params);
          break;
        default:
          break;
      }
      if (res.code == 1) {
        // 不够一页
        if (res.data.rows.length < 10) {
          this.listStatus = "nomore";
        }
        // 最后一页
        if (res.data.rows.length == 0) {
          this.lastPage = true;
        }
        // 第二页开始
        if (isNextPage) {
          this.dataList = this.dataList.concat(res.data.rows);
          console.log(this.dataList.length);
          return;
        }
        this.dataList = res.data.rows;
      }
    },
    // scroll 滚动记录
    scroll(e) {
      this.oldScrollTop = e.detail.scrollTop; // 必要
    },
    // 滚动到底部
    reachBottom() {
      if (this.lastPage || this.listStatus == "loading") return;
      console.log("触发");
      // if(this.lastPage || this.listStatus == 'loading') return ;
      // this.listStatus = 'loading'
      // setTimeout(() => {
      // 	if(this.lastPage) return ;
      // 	this.getList(true,++this.page)
      // 	if(this.dataList.length >= 10) this.listStatus = 'loadmore';
      // 	else this.listStatus = 'loading';
      // }, 1200)
      if (!this.lastPage) {
        this.listStatus = "loading";
        setTimeout(() => {
          console.log("加载");
          this.listStatus = "loadmore";
          this.getList(true, ++this.page);
        }, 500);
      }
    },
    // 点击搜索
    onSearch() {
      this.page = 0;
      this.lastPage = false;
      this.getList();
    },
    // 查看客户详情
    onItem(val) {
      this.$u.route("pages/client/customerDetails", {
        id: val.id,
      });
    },
    // 删除
    onDel(id, index) {
      //
      uni.showModal({
        title: "提示",
        content: "是否删除该跟进记录",
        success: (res) => {
          if (res.confirm) {
            this.onDelConfirm(id, index);
          }
        },
      });
    },
    async onDelConfirm(id, index) {
      let res;
      switch (this.current) {
        case 0:
          // 客户跟进记录 删除
          res = await this.$u.api.onRecordDel({
            id: id,
          });
          break;
        case 1:
          // 线索跟进记录 删除
          res = await this.$u.api.delCluesRecord({
            ids: id,
          });
          break;
        case 2:
          // 商机跟进记录 删除
          res = await this.$u.api.onBusinessRecordDel({
            id: id,
          });
          break;
        default:
          break;
      }
      if (res.code == 1) {
        this.$u.toast("删除成功");
        setTimeout(() => {
          this.dataList.splice(index, 1);
        }, 1000);
      }
    },
    // 添加客户
    onAdd() {
      // 微信小程序订阅消息 因为是一次性订阅所以暂时每个点击事件埋下订阅事件
      //#ifdef MP-WEIXIN
      // clues_customer 线索客户通知
      this.$reuse.subscriptionInfo("clues_customer");
      //#endif
      this.$u.route("pages/client/clientSet/clientSet", { type: "add" });
    },
  },
};
</script>

<style lang="scss">
.container {
  background-color: #f7f7f7;
  // min-height: 100vh;
}
.slot-wrap {
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  flex: 1;
}
.page-box {
  padding: 20rpx 20rpx 45rpx;
}
.client {
  width: 710rpx;
  background-color: #ffffff;
  margin-bottom: 20rpx;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 20rpx;
  font-size: 28rpx;
  .top {
    display: flex;
    justify-content: space-between;
    .left {
      display: flex;
      align-items: center;
      .store {
        max-width: 400rpx;
        font-size: 30rpx;
        font-weight: bold;
      }
    }
  }
  .tap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 20rpx 0 0;
    .u-tag {
      margin-right: 4rpx;
      font-size: 24rpx;
    }
    .tap-item {
      background-color: #ff6146;
      color: #fff;
      font-size: 25rpx;
      padding: 10rpx 25rpx;
      border-radius: 8rpx;
      margin-left: 10rpx;
      margin-bottom: 10rpx;
    }
  }
  .item {
    display: flex;
    margin: 20rpx 0 0;
    .content {
      flex: 1;
      .title {
        font-size: 28rpx;
      }
      .type {
        margin: 10rpx 0;
        font-size: 24rpx;
        color: $u-tips-color;
      }
    }
    .right {
      margin-left: 10rpx;
      text-align: right;
      .decimal {
        font-size: 24rpx;
        margin-top: 4rpx;
      }
      .number {
        color: $u-tips-color;
        font-size: 24rpx;
      }
    }
  }
  .total {
    margin-top: 20rpx;
    text-align: right;
    font-size: 24rpx;
    .total-price {
      font-size: 32rpx;
    }
  }
  .bottom {
    display: flex;
    margin-top: 20rpx;
    justify-content: space-between;
    align-items: center;
    .client_time {
      color: #777;
      font-size: 26rpx;
    }
    .btn {
      line-height: 60rpx;
      width: 160rpx;
      border-radius: 5px;
      font-size: 26rpx;
      text-align: center;
      color: $u-type-info-dark;
    }
    .sky {
      color: #ff6146;
      background-color: #f7f7f7;
    }
    .entity {
      color: #fff;
      background-color: #ff6146;
    }
  }
}
.wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.sort {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  height: 100%;
  height: 50px;
  .left-text {
    position: absolute;
    left: 10px;
    height: 100%;
    display: flex;
    align-items: center;
    width: 60%;
    z-index: 100;
    .fils {
      display: flex;
      align-items: center;
      height: 100%;
    }
  }
  /deep/ .u-dropdown__menu__item {
    justify-content: flex-end !important;
    padding-right: 40rpx;
  }
}
.swiper-box {
  flex: 1;
}
.swiper-item {
  height: 100%;
}

.floatBtn {
  font-size: 23rpx;
  bottom: 100px;
  right: 10px;
  border-radius: 5000px;
  z-index: 9;
  opacity: 1;
  width: 130rpx;
  height: 130rpx;
  position: fixed;
  display: flex;
  flex-direction: row;
  flex-direction: column;
  justify-content: center;
  background-color: #fff;
  color: #606266;
  align-items: center;
  transition: opacity 0.4s;
  border: 1px solid #dcdfe6;
  &.show {
    animation: showLayer 0.2s linear both;
  }
  &.hide {
    animation: hideLayer 0.5s linear both;
  }
  @keyframes showLayer {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(120rpx); //这里可以通过变大变小调整偏移量
    }
  }
  @keyframes hideLayer {
    0% {
      transform: translateX(120rpx);
    }
    100% {
      transform: translateX(0);
    }
  }
}
.slot-content {
  font-size: 28rpx;
  color: $u-content-color;
  padding: 30rpx;
  .content {
    height: 480rpx;
  }
}
</style>
